<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 这里写css的代码 */
    </style>
  </head>
  <body>
    <button onclick="alert('我是一个弹出层')">按钮</button>

    <!-- <script>
      // 写js的代码
      // script标签最推荐的地方是body里面的最下面
      console.log(111);
    </script> -->

    <script src="./js/index.js"></script>
  </body>
</html>

<!-- 
  1) 行内位置使用 ( 行内式 ) 不推荐
    从可维护性和可扩展性考虑，这种写法是不推荐的
    会导致结构和行为没有分离，看起来比较乱

  2) 内部位置使用 ( 内嵌式 )
    推荐写在body里面的最下面
    因为webkit引擎和v8引擎是互斥的(它们不能一起工作),又因为浏览器读取代码是从上往下的，所以如果js放在前面，而且js需要长时间运行(很大的循环或者报错等),那么页面就会出现长时间的白屏。

  3) 外部位置使用 ( 外链式 )
    - 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
    - 新建一个 `.js` 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面
 -->
